<template>
  <div>
    <div class="w">
      <div class="box">
        <header>
          <span class="sp">{{ list.product_name }}</span>
          <span class="h">描述</span>
          <span class="h">参数</span>
          <span class="h">用户评价</span>
        </header>
        <div class="box_t">
          <!-- 轮播图部分 -->
          <el-carousel trigger="click" height="460px">
            <el-carousel-item v-for="(item, index) in baanrlist" :key="index">
              <img
                :src="`http://101.132.181.9/api/${item.product_picture}`"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="box_x">
          <h2>{{ list.product_name }}</h2>
          <br />
          <p class="zz">{{ list.product_intro }}</p>
          <br />
          <p class="mi">小米自营</p>
          <br />
          <strong>{{ list.product_selling_price }}元</strong> &nbsp;
          <s>{{ list.product_price }}</s>
          <hr />
          <div class="mi1">
            <p>{{ list.product_name }}</p>
            <strong>{{ list.product_selling_price }}元</strong> &nbsp;
            <s>{{ list.product_price }}</s>
          </div>
          <el-button type="warning" style="width: 120px" @click="addgwc"
            >加入购物车</el-button
          >
          <el-button type="info" style="width: 120px" @click="like()"
            >喜欢</el-button
          >
        </div>
      </div>
    </div>
    <!-- 登录的对话框 -->
    <el-dialog title="登录" :visible.sync="dialogFormVisible1">
      <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleFor1"
        label-width="70px"
        class="demo-ruleForm1"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="ruleForm1.userName"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm1.password"
            prefix-icon="el-icon-view"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="login()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getdetailed,
  getbaanr,
  gwclist,
  getlogin,
  likelist,
} from "../../utils/api";
export default {
  data() {
    return {
      id: "",
      list: [],
      baanrlist: [],
      dialogFormVisible1: false,
      ruleForm1: {
        userName: "",
        password: "",
      },
      num: 1, // 购物车的数据
      maxNum: 5, // 最大数量是5
      // 登录对话框表单验证
      rules1: {
        userName: [
          {
            pattern: /^[a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
        password: [
          {
            pattern: /^[a-zA-Z][a-zA-Z0-9_-]{6,16}$/,
            message:
              "用户名不合法(以字母开头，允许5-16字节，允许字母数字下划线)",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.id = this.$route.query.productID;
    this.getlist();
    this.getbaanrlist();
    // console.log(4455, this.id)
  },

  methods: {
    //   详情数据接口
    async getlist() {
      var res = await getdetailed(this.id);
      console.log("详情数据", res);
      this.list = res.data.Product[0];
    },

    // 详情轮播图
    async getbaanrlist() {
      var res = await getbaanr(this.id);
      // console.log("商品详情轮播图", res);
      this.baanrlist = res.data.ProductPicture;
    },

    // 点击加入购物车
    async addgwc() {
      //  判断是否有token
      var userid = localStorage.getItem("userid");
      if (!userid) {
        this.dialogFormVisible1 = true;
      } else {
        this.$notify({
          title: " 加入成功",
          type: "success",
        });
      }
      var rid = this.list.product_id;
      console.log(999, rid);
      var res = await gwclist(userid, rid);
      console.log(888, res);
      if (res.data.code == "002") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "003") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }

      //  console.log('加入购物车',res);
    },
    // 登录 点击确定按钮是
    async login() {
      var res = await getlogin(this.ruleForm1);
      console.log("登录", res);

      if (res.data.code == "004") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "001") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
        this.dialogFormVisible1 = false;
        localStorage.setItem("userid", res.data.user.user_id);
      }
      if (res.data.code == "002") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
    },
    // 点击喜欢 添加到收藏
    async like() {
      var userid = localStorage.getItem("userid");
      var rid = this.list.product_id;
      var res = await likelist(userid, rid);

      console.log('喜欢',res);
      if (res.data.code == "002") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "001") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
      if (res.data.code == "004") {
        this.$notify({
          title: res.data.msg,
          type: "success",
        });
      }
    },
  },
};
</script>
<style lang="scss">
.box {
  height: 460px;
  box-shadow: 0 0 5px;
  margin-top: 20px;
  overflow: hidden;
}

.box_t {
  width: 50%;
  height: 100%;
  float: left;
  img {
    width: 100%;
    height: 100%;
  }
}
.box_x {
  width: 50%;
  height: 100%;
  float: left;
}
.mi {
  font-size: 18px;
  color: orange;
}
strong {
  font-size: 18px;
  color: orange;
}
s {
  color: #ccc;
}
.zz {
  color: #ccc;
}
hr {
  margin-top: 10px;
}
.mi1 {
  width: 500px;
  height: 100px;
  background: #f9f9fa;
  margin-top: 20px;
}
el-button {
  padding-top: 10px;
}
header {
  height: 60px;
  line-height: 60px;
}
.h {
  float: right;
  padding-left: 20px;
}
.h:hover {
  color: orange;
}
.sp {
  float: left;
}
</style>